<!-- 售后提交 -->
<template>
  <view class="apply-return">
    <!-- 申请售后 -->
    <view class="container" v-if="selected">
      <view style="padding: 16rpx 16rpx 0 16rpx">
        <view class="border"
          ><view class="topTitle"
            >{{ serviceType == 1 ? '退货商品' : '退款商品' }}
          </view>
          <view
            class="goodsStyle acea-row row-between border"
            v-for="cart in selectProduct"
            :key="cart.id"
          >
            <view class="pictrue">
              <image :src="cart.productInfo.image" class="image" />
            </view>
            <view class="title" style="margin-left: 24rpx; flex: 1">
              <view
                class="text row-between"
                style="
                  display: flex;
                  width: 100%;
                  justify-content: space-between;
                "
              >
                <view class="name line1">{{ cart.productInfo.storeName }}</view>
                <view class="money" style="font-weight: 500; color: #1a1a1a">
                  <view> ￥{{ cart.truePrice }} </view>
                </view>
              </view>
              <view class="">
                <view class="skus">
                  <view class="sku">
                    {{ cart.productInfo.attrInfo.sku || '' }}
                  </view>
                  <view class="num">x{{ cart.cartNum || 0 }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="list border">
          <view class="topTitle"> 退款信息</view>
          <view class="item acea-row row-between-wrapper" @click="changeReason">
            <view>退款原因</view>
            <view style="color: #ea3729"> * </view>
            <view class="num">{{ reason }}</view>
            <view v-show="!reason" class="change">
              <text class="text" style="margin-right: 16rpx">请选择</text>
              <text
                class="rotateZ iconfont icon-more1"
                style="font-size: 24rpx"
              ></text
            ></view>
          </view>
          <view class="item acea-row row-between-wrapper">
            <view>商品金额</view>
            <view class="num" style="color: #ff6010"
              >￥{{ totalMoney.toFixed(2) || 0 }}</view
            >
          </view>
          <view
            v-if="serviceType === 1"
            class="item acea-row row-between-wrapper"
          >
            <view>退货件数</view>
            <view class="num">{{ cartCount || 0 }}</view>
          </view>

          <view class="item textarea acea-row row-between">
            <view>备注说明</view>
            <textarea
              class="num"
              placeholder="填写备注信息，100字以内"
              v-model="refund_reason_wap_explain"
            ></textarea>
          </view> </view
      ></view>
      <view class="bottom">
        <view
          v-if="serviceType === 0"
          class="returnBnt bg-color-orgin"
          @click="submit"
          >申请退款</view
        >
        <view
          v-if="serviceType === 1"
          class="returnBnt bg-color-orgin"
          @click="submit"
          >申请退货</view
        >
      </view></view
    >
    <!-- 选择商品 -->
    <view class="selectProduct" v-else>
      <view class="selectContainerAll">
        <view
          class="selectContainer"
          v-for="(cart, index) in selectProduct"
          :key="cart.id"
        >
          <view class="checkbox-wrapper">
            <checkbox-group @change="switchSelect($event, index)">
              <label class="well-check">
                <checkbox
                  color="#fff"
                  value
                  :checked="cart.checked"
                  class="mycheck"
                  activeBackgroundColor="#FF5900"
                ></checkbox>
              </label>
            </checkbox-group>
          </view>
          <view class="pictrue">
            <image :src="cart.productInfo.image" class="image" />
          </view>
          <view class="content">
            <view style="display: flex">
              <view class="title line1">{{
                cart.productInfo.storeName || ''
              }}</view>
              <view class="money">
                ￥<view>
                  {{ cart.truePrice }}
                </view>
              </view>
            </view>
            <view class="skus">
              <view class="sku">
                {{ cart.productInfo.attrInfo.sku || '' }}
              </view>
              <view class="num">x{{ cart.cartNum || 0 }}</view>
            </view>
            <view class="status">
              {{ orderInfo._status._title }}
            </view>
          </view>
        </view></view
      >

      <view class="choose">
        <view class="checkTotal">
          <checkbox-group @change="allChecked">
            <label class="well-check">
              <checkbox
                color="#fff"
                value="allSelect"
                :checked="isAllSelect"
                class="mycheck"
                activeBackgroundColor="#FF5900"
              ></checkbox>
              <text class="checkAll">全选</text>
            </label>
          </checkbox-group>
          <view class="typeBtn">
            <view class="proTotal">已选 {{ cartCount || 0 }}件 </view>
            <view class="button redBtn" @click="confirmRefund">确定</view>
          </view>
          <!-- <view class="total">
            <view class="proTotal"> {{ orderInfo.totalNum || 0 }}件商品 </view>
            <view class="moneyTotal">
              合计 ￥ {{ orderInfo.totalPrice || 0 }}
            </view>
          </view> -->
        </view>
        <!-- <view class="typeBtn">
          <view class="button def" @click="chooseType(0)">仅退款</view>
          <view class="button redBtn" @click="chooseType(1)">退货退款</view>
        </view> -->
      </view>
    </view>
    <!-- 申请售后的方式 -->
    <choosePopup
      :showChoose.sync="showChoose"
      title="退款申请"
      :chooseList="chooseList"
      @getChooseList="getChooseList"
      :isRadio="true"
    ></choosePopup>

    <!-- 退款原因 -->
    <choosePopup
      :showChoose.sync="reasonShowChoose"
      title="退款原因"
      :chooseList="reasonList"
      @getChooseList="getReasonList"
      :isRadio="true"
    ></choosePopup>
  </view>
</template>

<script>
import { orderDetail, getRefundReason, postOrderRefund } from '@/api/order'
import { submitAfterSealsOrder } from '@/api/aftersales.js'
import { trim } from '@/utils'
import { BaseUrl } from '@/common/config.js'
import choosePopup from '../../../../components/choosePopup/choosePopup.vue'

export default {
  name: 'goodsReturn',
  components: {
    choosePopup,
  },
  components: {
    // VueCoreImageUpload
  },
  data() {
    return {
      url: `${BaseUrl}/upload/image`,
      headers: {
        Authorization: 'Bearer ' + this.$store.state.token,
      },
      showChoose: false, //售后方式下方弹窗
      reasonShowChoose: false, //退款原因弹出窗
      chooseList: [
        {
          name: '退货退款',
        },
        // {
        //   name: '仅退款',
        // },
      ],

      id: 0,
      selected: false,
      orderInfo: {},
      rebackList: [],
      reasonList: [
        {
          name: '退货退款',
        },
        // {
        //   name: '仅退款',
        // },
      ],
      reason: '',
      refund_reason_wap_explain: '',
      refund_reason_wap_img: [],
      serviceType: null,
      // 选中售后商品
      selectProduct: [],
      productParamList: [],
      totalNum: 0,
      totalMoney: 0,
      isAllSelect: false,
    }
  },
  computed: {
    cartCount() {
      let arr = this.selectProduct.filter(item => item.checked)
      console.log(arr, 'arr00000000')
      if (arr.length) {
        let num = arr.reduce((pre, cur) => {
          return pre + cur.cartNum
        }, 0)
        return num
      } else return 0
    },
  },
  mounted() {
    this.id = this.$yroute.query.id || 0
    this.getOrderDetail()
    this.getRefundReason()
  },
  methods: {
    //退款原因
    changeReason(e) {
      this.reasonShowChoose = true
      console.log(this.reasonShowChoose, 34343434, this.reasonList)
    },
    //退款原因返回值
    getReasonList(arr) {
      let _this = this

      _this.reason = arr[0].name
      console.log('qqqqqqqq', arr)
      _this.reasonShowChoose = false
    },
    imageuploaded(res) {
      if (res.status !== 200) {
        uni.showToast({
          title: err.msg || err.response.data.msg || err.response.data.message,
          icon: 'none',
          duration: 2000,
        })
        return
      }
      this.refund_reason_wap_img.push(res.data.url)
    },
    //确认退货
    confirmRefund() {
      let index = this.selectProduct.findIndex(item => item.checked)
      console.log('确认退货', this.selectProduct, index)
      if (index == -1) return
      this.showChoose = true
    },
    //确认退货 的返回值
    getChooseList(arr) {
      let _this = this
      if (arr.length > 0) {
        arr.forEach(index => {
          console.log('返回的选择', arr, index)
          if (index.name == '退货退款') {
            this.chooseType(1)
          } else if (index.name == '仅退款') {
            this.chooseType(0)
          }
          this.showChoose = false
        })
        // cancelOrder({
        //   treatmentId: this.currentClickInfo.id,
        //   cancelReason: arr[0].name,
        // })
        //   .then((res) => {
        //     uni.showToast({
        //       title: "已取消",
        //       icon: "none",
        //       duration: 1000,
        //     });
        //     _this.changeNavList(this.currentClickInfo.id, 5, 1);
        //     this.showChoose = false;
        //   })
        //   .catch((err) => {
        //     this.showChoose = false;
        //   });
      }
    },

    getOrderDetail() {
      uni.showLoading({
        title: '正在查询商品',
        duration: 2000,
      })
      orderDetail(this.id)
        .then(res => {
          this.orderInfo = res.data
          this.selectProduct = res.data.cartInfo.map(item => {
            // item.checked = false
            this.$set(item, 'checked', false)
            return item
          })
          console.log('商品信息', res.data, this.selectProduct)
          if (res.data.cartInfo.length === 0) {
            uni.showToast({
              title: '订单无可售后商品',
              icon: 'none',
              duration: 2000,
            })
            return
          }
          uni.hideLoading()
        })
        .catch(err => {
          uni.hideLoading()
          uni.showToast({
            title:
              err.msg || err.response.data.msg || err.response.data.message,
            icon: 'none',
            duration: 2000,
          })
        })
    },
    getRefundReason() {
      getRefundReason().then(res => {
        this.reasonList = res.data.map(item => {
          if (item) {
            return {
              name: item,
            }
          }
        })
      })
    },
    // 选择退款商品
    switchSelect(e, index) {
      let isAll = true
      this.$set(
        this.selectProduct[index],
        'checked',
        !this.selectProduct[index].checked
      )
      // this.selectProduct[index].checked = !this.selectProduct[index].checked
      this.selectProduct.forEach(item => {
        if (!item.checked) {
          isAll = false
        }
      })
      this.isAllSelect = isAll
    },
    // 全选
    allChecked(e) {
      this.isAllSelect = !this.isAllSelect
      this.selectProduct.forEach(item => {
        item.checked = this.isAllSelect
      })
    },
    // 选择退款类型
    chooseType(val) {
      this.selectProduct = this.selectProduct
        .map(item => {
          if (item.checked) {
            this.productParamList.push({
              productId: item.productId,
            })
            console.log(item.costPrice, 'sdfsdfsdfsdfasd')
            // 原来的代码
            this.totalMoney += parseFloat(item.truePrice * item.cartNum) //payPrice
            this.totalNum += 1

            return item
          }
        })
        .filter(r => r)
      this.selected = true
      this.serviceType = val
    },
    submit() {
      const refund_reason_wap_explain = trim(this.refund_reason_wap_explain)
      if (!this.reason) {
        uni.showToast({
          title: '请选择退款原因',
          icon: 'none',
          duration: 2000,
        })
        return
      }
      submitAfterSealsOrder({
        orderCode: this.orderInfo.orderId,
        serviceType: this.serviceType,
        reasonForApplication: this.reason,
        applicationInstructions: refund_reason_wap_explain,
        applicationDescriptionPicture: this.refund_reason_wap_img.join(','),
        productParamList: this.productParamList,
      })
        .then(res => {
          if (res.status === 200) {
            uni.showToast({
              title: res.msg,
              icon: 'success',
              duration: 2000,
            })
            setTimeout(() => {
              this.$yrouter.push({
                path: '/packageShop/pages/order/ReturnList/index',
              })
            }, 1500)
          }
        })
        .catch(err => {
          uni.showToast({
            title:
              err.msg || err.response.data.msg || err.response.data.message,
            icon: 'none',
            duration: 2000,
          })
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.apply-return {
  .container {
    .border {
      border-radius: 20rpx;
      background-color: #fff;
    }

    .topTitle {
      padding: 24rpx 0 0 24rpx;
      font-size: 32rpx;
      color: #1a1a1a;
      font-weight: 500;
      margin-bottom: 24rpx;
    }
    .change {
      color: #999999;
      font-size: 28rpx;
    }
    .goodsStyle .text {
      // width: 540rpx;
      overflow: hidden;
    }
    .skus {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #999999;
      font-size: 28rpx;
    }
    .bottom {
      position: fixed;
      bottom: 0;
      background-color: #fff;
      width: 100%;
    }
  }

  .selectProduct {
    margin-bottom: 180rpx;
    .check {
      ::v-deep .uni-checkbox-input {
        border-radius: 40rpx;
      }
    }
    .checkbgc {
      ::v-deep .uni-checkbox-input {
        border-radius: 40rpx;
        background-color: #FF5900;
        border-color: #FF5900;
      }
    }
    .selectContainerAll {
      border-radius: 20rpx;
      background-color: #fff;
      margin: 16rpx 16rpx 0 16rpx;
    }
    .selectContainer {
      padding: 20rpx 32rpx;
      display: flex;
      align-items: center;
      .pictrue {
        .image {
          width: 180rpx;
          height: 180rpx;
        }
      }
      .content {
        width: 100%;
        height: 100%;
        margin-left: 16rpx;
        font-size: 24rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title {
          width: 150px;
        }
        .money {
          display: flex;
          width: 30px;
          color: #1a1a1a;
          view {
            font-size: 30rpx;
          }
        }

        .skus {
          display: flex;
          justify-content: space-between;
          color: #999999;
        }
        .status {
          color: #FF5900;
          font-size: 28rpx;
          margin-top: 20rpx;
        }
      }
    }

    .choose {
      width: 100%;
      padding: 20rpx 24rpx;
      background-color: #fff;
      position: fixed;
      bottom: 0;
      height: 120rpx;
      line-height: 120rpx;
      .checkTotal {
        height: 80rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .total {
          display: flex;
          .proTotal {
            color: #999999 !important;
            font-size: 24px;
          }
          .moneyTotal {
            color: #333;
            margin-left: 30rpx;
          }
        }
      }
      .typeBtn {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .button {
          width: 351rpx;
          height: 80rpx;
          margin: 0 10rpx;
          line-height: 80rpx;
          text-align: center;
          font-size: 32rpx;
          border-radius: 180rpx;
        }
        .proTotal {
          color: #999999;
          font-size: 24rpx;
        }
        .def {
          color: #aaaaaa;
          border: 2rpx solid #dddddd;
        }
        .redBtn {
          color: #fff;
          background-color: #FF5900;
        }
      }
    }
  }
}
.bg-color-orgin {
  background-color: #FF5900;
}

.checkAll {
  color: #999999;
  font-size: 28rpx;
}
.apply-return .list .item:last-child {
  border: 0;
}
::v-deep .uni-checkbox-input:hover {
  border-color: #FF5900 !important;
}
</style>
